<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .grid {
        height: 200px;
        width: 100%;
        background-image: linear-gradient(
            to right,
            rgb(203 213 225) 1px,
            transparent 1px
          ),
          linear-gradient(to bottom, rgb(203 213 225) 1px, transparent 1px);
        background-size: 20px 20px;
        background-position: center center;
      }

      .grid-mask-1 {
        -webkit-mask-image: radial-gradient(
          ellipse 50% 50% at 50% 50%,
          #000 70%,
          transparent 100%
        );
        mask-image: radial-gradient(
          ellipse 50% 50% at 50% 50%,
          #000 70%,
          transparent 100%
        );
      }

      .grid-mask-2 {
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent,
            #fff 50px calc(100% - 50px),
            transparent
          ),
          linear-gradient(
            to right,
            transparent,
            #fff 50px calc(100% - 50px),
            transparent
          );
        mask-image: linear-gradient(
            to bottom,
            transparent,
            #fff 50px calc(100% - 50px),
            transparent
          ),
          linear-gradient(
            to right,
            transparent,
            #fff 50px calc(100% - 50px),
            transparent
          );
        mask-composite: intersect;
        -webkit-mask-composite: source-in, xor;
      }

      .grid-radial {
        height: 200px;
        background-image: radial-gradient(
          circle,
          rgb(203 213 225) 2px,
          #fff 2px
        );
        background-size: 20px 20px;
        background-position: center center;
      }

      .grid-point {
        background-image: linear-gradient(45deg, #8d8b8b 25%, transparent 0),
          linear-gradient(-45deg, #8d8b8b 25%, transparent 0),
          linear-gradient(45deg, transparent 75%, #8d8b8b 0),
          linear-gradient(-45deg, transparent 75%, #8d8b8b 0);
        background-position: 0 0, 0 10px, 10px -10px, -10px 0;
        background-size: 20px 20px;
      }
    </style>
  </head>
  <body>
    <div class="grid"></div>
    <div class="grid grid-mask-1"></div>
    <div class="grid grid-mask-2"></div>
    <div class="grid grid-radial"></div>
    <div class="grid grid-point"></div>
  </body>
</html>
